<template>
  <view class="error-container" v-if="show">
    <view class="error-icon">❌</view>
    <view class="error-title">{{ title }}</view>
    <view class="error-message">{{ message }}</view>
    <button class="retry-button" @tap="onRetry">重试</button>
  </view>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '加载失败'
    },
    message: {
      type: String,
      default: '无法连接到服务器，请检查网络连接'
    }
  },
  methods: {
    onRetry() {
      this.$emit('retry');
    }
  }
}
</script>

<style lang="scss" scoped>

.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  text-align: center;
  
  .error-icon {
    font-size: 80rpx;
    margin-bottom: 20rpx;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Segoe UI Symbol", sans-serif;
  }
  
  .error-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    -webkit-font-smoothing: subpixel-antialiased;
  }
  
  .error-message {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 40rpx;
  }
  
  .retry-button {
    background-color: #1e3c72;
    color: #fff;
    font-size: 28rpx;
    padding: 10rpx 40rpx;
    border-radius: 40rpx;
    -webkit-font-smoothing: antialiased;
  }
}
</style> 